|
کامپیوتر-دبیرستان شاهد زنده یاد مهندس مهدی صافی دستجردی
آخرین اطلاعات مربوط به کامپیوتر و فناوری اطلاعات
|
||
|
برچسب:, :: :: نويسنده : وحید
بر مبنای نوع کاربرد می توان کاربران فتوشاپ را به سه دستهتقسیم کرد:
۱. طراحان گرافیست
۲. عکاسان
۳. طراحان وب و چندرسانه ای
تاکنون ابزارهای فراوانی را برای دسته های اول و دوم با همبررسی کرده ایم و با کاربرد آنها آشنا شده ایم ، اما برای دسته سوم که همان طراحانوب هستند زیاد صحبت نکرده ایم.
در این بخش می خواهیم درباره طراحی صفحات وب به کمک فتوشاپ وابزارها و فرامینی که به ما در این زمینه کمک می کنند صحبت کنیم و با آنها آشناشویم.
هر صفحه وب از دو بخش تشکیل شده است؛ بخش اول محیط گرافیکی صفحهو بخش دوم محیط کدنویسی است که به کمک آن محیط گرافیکی ایستا به یک محیط پویا تبدیلمی شود.
به جرات می توان گفت به همان اندازه که کدنویسی درست در طراحیوب سایت مهم است، طراحی گرافیکی وب سایت نیز اهمیت ویژه ای دارد.
اینجاست که فتوشاپ پا به میدان می گذارد و طراح وب می تواند باکمک آن به بهترین نحو ممکن قدرت کدنویسی خود را به نمایش بگذارد.
معمولا قبل از شروع به کار طراحی وب سایت، طرح جامعی از سایت وصفحات مورد نیاز آن تهیه و با توجه به آن قالب گرافیکی سایت طراحی می شود.
پس از اتمام طراحی، با انتقال قالب به محیط برنامه های طراحیوب، ارتباط بین قسمت های مورد نظر تعریف شده و خروجی نهایی صورت می گیرد.
اولین کار برای ایجاد قالب سایت، تعریف یک پروژه جدید با اندازهمورد نظر سایت است. برای این کار ابتدا از قسمت File گزینه New را انتخاب و پروژهجدید را تعریف می کنیم.
فقط باید دقت کرد که در محیط وب واحد اندازه گیری بر مبنایپیکسل بوده و از استاندارد معینی تبعیت می کند.
برای سهولت کار می توانیم در پنجره New با کلیک در قسمت Preset و انتخاب گزینهWeb از اندازه های استانداردی که در قسمت Size ظاهر می شود استفادهکنیم.
رزولوشن محیط وب نیز برخلاف چاپ که تاکید کردیم ۳۰۰ انتخاب شود،باید ۷۲ یا حداکثر ۹۶ باشد، زیرا بیشتر از این مقدار تغییر چندانی در کیفیت تصویرایجاد نمی شود، فقط حجم فایل خروجی را بیهوده افزایش داده ایم.
در نهایت با تایید ابعاد پروژه وارد محیط کاری فتوشاپ می شویم. استفاده از خطوط راهنمایی که در شماره گذشته درباره آن صحبت کردیم در طراحی قالب،وب یکی از کاربردی ترین بخش هاست و به کمک آن می توانیم نسبت به مشخص کردن موقعیت ومحل قسمت های مختلف سایت خود اقدام کنیم.
پس در ابتدای کار با مشخص کردن Header و Footer و محل چیدمانستون های سایت خود، خطوط راهنمایی را در موقعیت مناسب آنها قرار می دهیم.
در ادامه به کمک ابزارهای موجود مثل ابزارهای برداری، شیب رنگ، Layer Style و... به طراحی قالب مورد نظرمان اقدام می کنیم.
یکی از مهم ترین نکاتی که یک طراح سایت باید در نظر داشته باشد،کم حجم کردن سایت برای سهولت بارگذاری آن در اینترنت های کم سرعت است و با توجه بهاین که بیشتر حجم یک سایت نیز مربوط به تصاویر استفاده شده در آن است، بنابراین بهکمک فتوشاپ و ترفندهای طراحی سایت می توانیم سایتی با کمترین حجم ممکن بدون صرف نظرکردن از جلوه های گرافیک تولید کنیم.
یکی از ترفندهای طراحی سایت استفاده از دستور تکرار (Repeat) درکدنویسی سایت است که در آن با تکرار یک تصویر به صورت پشت سر هم، اندازه وسیعی ازفضای مورد نظر بدون افزایش حجم پوشانده می شود.
مثلا برای پوشش پس زمینه سایت یا قسمت سرصفحه یا پاصفحه سایت میتوانیم از این ترفند استفاده کنیم و حجم سایت خود را تا حد بسیار زیادی کاهش دهیم.
برای تولید تصویری که با تکرار آن، شکل مورد نظر ایجاد می شودمی توانیم از قسمت جعبه ابزار فتوشاپ و مجموعه مارکی ابزار Single Row یا Single Column را برای انتخاب یک پیکسل از تصویر به صورت افقی یا عمودی از محیط کاریاستفاده کنیم.
در مرحله بعد با قرار دادن خطوط راهنما در ابتدا و انتهای قسمتانتخاب شده، به کمک ابزار Crop آن بخش را برش داده و از آن برای تکرار و ایجاد حالتمورد نظر استفاده کنیم.
یکی دیگر از قسمت های کاربردی فتوشاپ برای طراحان وب، ابزار Slice در زیر مجموعه ابزار Crop است که به کمک آن طراح می تواند تصویر خود را بهقسمت های کوچک تری تقسیم کرده و باعث افزایش سرعت بارگذاری سایت شود حتی می تواندبرای هر بخش انتخاب شده آدرس URL دلخواهی را تعریف کند تا کاربر با کلیک روی آنبخش، به صفحه مورد نظر طراح هدایت شود.
برای این کار کافی است پس از تعریف Slice در گوشه سمت چپ وبالای آن دوبار کلیک کنید و در پنجره باز شده آدرس مورد نظر و سایر مشخصات دلخواهرا بنویسید.
یکی دیگر از قابلیت های مهم فتوشاپ برای طراحان وب تولید خروجیمناسب وب از صفحه طراحی شده بدون استفاده از برنامه های طراحی وب است.
برای این کار پس از اتمام طراحی، از قسمت File گزینه save for web را انتخاب کرده و با تعریف فرمت دلخواه از قسمت Preset گزینه save را انتخاب میکنیم.
البته کاربرد اصلی این بخش، تولید تصاویر کم حجم به منظوراستفاده در صفحات اینترنتی است، اما همان گونه که گفته شد می توانیم این تصاویر راهمراه صفحه html مورد نظر نیز تولید و آن را در سایت خود آپلود کنیم.
از فرمت های کم حجم رایج عکس برای استفاده در صفحات وب می توانبه JPEG، Gif و PNG اشاره کرد که از بین آنها فرمت Gif و PNG جهت ذخیره سازی لایههای شفاف نیز کاربرد دارد که البته حجم بیشتری نیز نسبت به فرمت JPEG دارد. در صورتاستفاده از تصاویر شفاف روی دیگر تصاویر در وب، کادری اطراف تصویر مورد نظر ظاهرنمی شود و از این بابت حرفه ای تر خواهد بود.
با انتخاب گزینه Save for Web از قسمت File پنجره ای مطابق شکلظاهر می شود که از آن می توانیم برای ایجاد تناسب دلخواه بین کیفیت و حجم تصویر ازبین حالت های فراوانی که وجود دارد، استفاده کنیم.
۱. فعال کردن حالت مقایسه ای تصویر بین حالت اصلی و حالت انتخابشده برای ایجاد خروجی کم حجم.
۲. پیش نمایش تصویر قبل و بعد از اعمال تغییرات.
۳. توضیحات مربوط به اندازه تصویر نهایی و سرعت بارگذاری آن دراینترنت.
۴. گزینه های قابل انتخاب برای تنظیم حالت دلخواه تصویر نهاییاز بین سه فرمت JPEG، Gif و PNG (از حالت های پیشفرض موجود در قسمت Preset نیز میتوان استفاده کرد).
۵. نمایش یا عدم نمایش متا دیتا مخفی شده در عکس.
۶. جدول رنگ های استفاده شده در صورتی که حالت Gif انتخاب شدهباشد.
۷. تنظیم سایز تصویر نهایی.
۸. تنظیم انیمیشن موجود در تصویر در صورت تعریف انیمیشن و ایجادخروجی Gif.
در نهایت با کلیک روی دکمه save و انتخاب حالت دلخواه Image Only یا html Only یا هر دو، فایل خود را با کمترین حجم ممکن ذخیره می کنیم. نظرات شما عزیزان:
درباره وبلاگ
 به وبلاگ من خوش آمدید  آرشيو وبلاگ
پیوندهای روزانه
پيوندها
|
||
 |
تبادل
لینک هوشمند
